<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		    .tiji{
		    	width: 200px;
		    	height: 200px;
		    	border-radius: 50%;
		    	box-shadow: 5px 5px 5px yellow;
		    	position: absolute;
		    	left: 200px;
		    	top: 100px;
		    }
			.y1 {
				width: 200px;
				height: 100px;
				background-color: black;
				border-radius: 200px 200px 0 0;
				position: relative;
			}
			.y2 {
				width: 200px;
				height: 100px;
				background-color: yellow;
				border-radius: 0 0 200px 200px;
				position: relative;
				
			}
			 .sub {
			 	width: 100px;
			 	height: 100px;
			 	border-radius: 50%;
			 	background-color: black;
			 	position: absolute;
			 	top: 50px;
			 	left: 0px;
			 	z-index: 10;
			 	
			 }
			 .sub2 {
			    width: 100px;
			    height: 100px;
			    background-color: yellow;
			    border-radius: 50%;
			    position: absolute;
			    bottom: 50px;
			    right: 0px;
			    z-index: 10;
			 }
			 .x {
			 	width: 30px;
			 	height: 30px;
			 	background-color: white;
			 	border-radius: 50%;
			 	position: absolute;
			 	right: 30px;
			 	bottom: 50px;
			 }
			 .x1 {
			 	width: 30px;
			 	height: 30px;
			 	background-color: white;
			 	border-radius: 50%;
			 	position: absolute;
			 	left: 30px;	
			 	top: 25px;	
			  }
			  body{
			  	margin: 0;
			  	padding: 0;
			  }
			  #nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #333;
			}
			
			#nav li {
				float: left;
				width: 150px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #FFFFFF;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #000;
				color: #ddd;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">首页</span></a>
					</li>


					<li>
						<a href="boom.html"><span class="cn">LED时钟</span><span class="en">LED时钟</span></a>
					</li>
					<li>
						<a href="pingBao.html"><span class="cn">屏保弹跳</span><span class="en">屏保弹跳</span></a>
					</li>


					<li>
						<a href="TIji.html"><span class="cn">太极运动</span><span class="en">太极运动</span></a>
					</li>


					<li>
						<a href="shuaiWei.html"><span class="cn">摆尾效果</span><span class="en">摆尾效果</span></a>
					</li>
					
					<li>
						<a href="shadow.html"><span class="cn">阴影效果</span><span class="en">阴影效果</span></a>
					</li>
					
					<li>
						<a href="tanTanTan.html"><span class="cn">小球的弹跳</span><span class="en">小球的弹跳</span></a>
					</li>


					<li>
						<a href="house.html"><span class="cn">Canvas小房子</span><span class="en">Canvas小房子</span></a>
					</li>
				</ul>
			</div>
		<div class="tiji">
			<div class="y1"><div class="sub"><div class="x"></div></div></div>
			<div class="y2"><div class="sub2"><div class="x1"></div></div></div>
		</div>
	    <button onclick="Divleft(10)">向右移动</button>
	    <button onclick="Divleft(-10)">向左移动</button>
	    <button onclick="Divtop(10)">向下移动</button>
	    <button onclick="Divtop(-10)">向上移动</button>
	    <button onclick="Divlefttop(-10,-10)">向左上移动</button>
	    <button onclick="Divlefttop(-10,10)">向左下移动</button>
	    <button onclick="Divlefttop(10,10)">向右下移动</button>
	    <button onclick="Divlefttop(10,-10)">向右上移动</button>
	    <script type="text/javascript">
 	    var l= 200;
 	    var t= 100;
	    
	         function Divleft(arg) {
	                 var tj = document.querySelector(".tiji");
	                  l = l + arg;
	                 tj.style.left = l +"px";
	    	    }    
	           function Divtop(arg) {
	           	       var tj = document.querySelector(".tiji")
	           	       t = t+arg;
	           	       tj.style.top =t+"px"
	           	       
	           }
	           function Divlefttop(x,y)
	           {
	           	        var tj = document.querySelector(".tiji")
	           	        l=l+x;
	           	        t=t+y;
	           	        tj.style.left=l+"px";
	           	        tj.style.top=t+"px";
	           }
	    </script>
	</body>
</html>
